<template>
  <div class="video-player-container">
    <div class="controls-row">
      <div class="left-controls">
        <span class="video-format-text">视频格式：</span>
        <label>
          <input 
            type="radio" 
            v-model="selectedFormat" 
            value="h264" 
            :disabled="isPlaying"
          > H264
        </label>
        <label>
          <input 
            type="radio" 
            v-model="selectedFormat" 
            value="rtmp" 
            :disabled="isPlaying"
          > RTMP
        </label>
        <button 
          @click="togglePlayback" 
          class="play-button"
        >
          {{ isPlaying ? '停止播放' : '播放' }}
        </button>
      </div>
      <BackButton />
    </div>

    <video 
      ref="videoElement" 
      controls 
      class="video-element"
    ></video>

    <div v-if="showRtmpDialog" class="rtmp-dialog">
      <div class="rtmp-dialog-content">
        <h3>输入RTMP URL</h3>
        <input 
          v-model="rtmpUrl" 
          type="text" 
          placeholder="例如: rtmp://example.com/live/stream"
          class="rtmp-input"
        >
        <div class="dialog-buttons">
          <button @click="confirmRtmpPlay" class="confirm-button">确认</button>
          <button @click="cancelRtmpPlay" class="cancel-button">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BackButton from '../components/BackButton.vue';
import flvjs from 'flv.js';
export default {
  name: 'VideoPlayer',
  components:{
    BackButton
  },
  data() {
    return {
      selectedFormat: 'h264',
      isPlaying: false,
      showRtmpDialog: false,
      rtmpUrl: '',
      flvPlayer: null,
    }
  },
  methods: {
    togglePlayback() {
      if (this.isPlaying) {
        this.stopPlayback();
      } else {
        this.startPlayback();
      }
    },
    
    startPlayback() {
      if (this.selectedFormat === 'h264') {
        this.startH264Playback();
      } else {
        this.showRtmpDialog = true;
      }
    },
    
    startH264Playback() {
      //h264播放逻辑
      
      this.isPlaying = true;
    },
  
    
    startRtmpPlayback(url) {
      if (flvjs.isSupported()) {
        const videoElement = this.$refs.videoElement;
        
        // 停止之前的播放器
        if (this.flvPlayer) {
          this.flvPlayer.destroy();
          this.flvPlayer = null;
        }
        
        // 创建新的播放器
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: url,
          isLive: true
        });
        
        this.flvPlayer.attachMediaElement(videoElement);
        this.flvPlayer.load();
        
        this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
          console.error('RTMP播放错误:', errType, errDetail);
          this.stopPlayback();
          alert('RTMP播放失败，请检查URL');
        });
        
        this.flvPlayer.play().catch(e => {
          console.error('播放失败:', e);
          this.stopPlayback();
          alert('播放失败: ' + e.message);
        });
        
        this.isPlaying = true;
      } else {
        alert('您的浏览器不支持RTMP/FLV播放');
      }
    },
    
    stopPlayback() {
      //关闭h264或rtmp播放时使用的对象

      // 停止RTMP播放
      if (this.flvPlayer) {
        this.flvPlayer.pause();
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
      
      const videoElement = this.$refs.videoElement;
      videoElement.src = '';

      this.isPlaying = false;
    },
    
    confirmRtmpPlay() {
      if (this.rtmpUrl.trim()) {
        this.showRtmpDialog = false;
        this.startRtmpPlayback(this.rtmpUrl);
      }
    },
    
    cancelRtmpPlay() {
      this.showRtmpDialog = false;
      this.rtmpUrl = '';
    },
    
  },
  
  beforeUnmount() {
    this.stopPlayback();
  }
}
</script>

<style scoped>
.video-player-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.left-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.video-format-text {
  font-weight: bold;
}

.play-button, .back-button {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.play-button {
  background-color: #4CAF50;
  color: white;
}

.video-element {
  width: 100%;
  max-height: 500px;
  background-color: #000;
}

.rtmp-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.rtmp-dialog-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
}

.rtmp-input {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
  box-sizing: border-box;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-button, .cancel-button {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.confirm-button {
  background-color: #4CAF50;
  color: white;
}

.cancel-button {
  background-color: #f44336;
  color: white;
}
</style>